<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator"
	prefix="decorator"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<decorator:usePage id="mainPage" />
<html>
<head>
<link href="<s:url value='/css/not-ie.css' />" rel="stylesheet"
	type="text/css">
<script language="javascript" src="<s:url value='/js/control.js' />"></script>
<script type="text/javascript"
	src="<s:url value='/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js' />"></script>
<script type="text/javascript"
	src="<s:url value='/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js' />"></script>
<link rel="stylesheet"
	href="<s:url value='/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css' />" />
<script language="javascript">
	function setArea() {
		
		
	frm = document.calArea;
	frm.action="<s:url value='/initCal.action'/>";
	frm.submit();
	}

	function sf(){
		var widthArea = document.getElementById("widthArea").value;
		var heightArea = document.getElementById("heightArea").value;
		
		var area = parseInt((widthArea * heightArea) / 0.32) ;
		var dsize =  parseInt("<s:property value='lstSearch.size()'/>",0);
	    if(dsize!=0){
	    	alert("จำนวน "+area+" ต้น");
	    }
		
		document.getElementById("area").style.width = widthArea*100;
		document.getElementById("area").style.height = heightArea*100;
		document.getElementById("area").style.display = "block";
   }
	
</script>
<style type="text/css">
	.tab-bar {
		width: 100%; 
		height: 100px; 
		overflow: hidden;
	}
	.tab-body {
		float: left;
		width: 100%; 
		vertical-align: top; 
		overflow: hidden;
	}
</style>
</head>
<body onload="javascript:sf();">
	<s:form id="calArea" name="calArea" onsubmit="return savePage();" method="post"
		theme="simple"  cssClass="margin-zero"
		cssStyle="height:500px">
      
         <h1>คำนวนหาจำนวนสับปะรด</h1>
         <br>
         <br>
         <br>
		<table class="form" style="vertical-align: bottom;padding-top: 20px;margin-top: 10px;">
			<tr>
				<td>ความกว้างของแปลง   : <s:textfield id="widthArea" name="widthArea" />เมตร </td>
				<td>ความยาวของแปลง  : <s:textfield id="heightArea" name="heightArea" />เมตร</td>
				<td>
					<input type="button" id="btnSave"	onclick="setArea();" value="คำนวน" />
				</td>
			</tr>
			<tr>
			<td colspan="3">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3">
					<div style="width: 1000px;height: 350px;overflow: scroll;">
						<div style="display: none;" id="area">
							<s:iterator value="lstSearch" status="status" var="result">
							<div style='width: 32px;height: 32px;float:left;padding-top:10px;text-align: center;' >
							   <input type='image' src='<s:url value='/images/15.png'/>'>
							 </div> 
							</s:iterator>
						</div>
					</div>
				</td>
			</tr>
		</table>
		<s:token />
	</s:form>
</body>
</html>